<template>
    <div>
        <div class="nav">
            <input type="text" placeholder="化妆品">
            <img :src="sheng" alt="" class="img">
            <span><img :src="fdj" alt=""></span>
        </div>
        <div class="uls">
            <ul>
                <router-link tag="li" to="/Wclothes">今日精选</router-link>
                <router-link tag="li" to="/Wclothes">女装</router-link>
                <router-link tag="li" to="/Wclothes">女士护理</router-link>
                <router-link tag="li" to="/Wclothes">美妆</router-link>
                <router-link tag="li" to="/Wclothes">内衣</router-link>
                <li><img :src="duo" alt=""></li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      text: '返回',
      fdj: require('../../static/imgs/fdj.png'),
      sheng: require('../../static/imgs/gwc.png'),
      duo: require('../../static/imgs/home.png')
    }
  },
  components: {

  }
}
</script>

<style scoped>
header{
    position:relative;
}
.nav{
    display: flex;
    background: #00a0e9;
    align-items: center;
    justify-content: center;
    height:50px;
    position:fixed;
    top:0;
    width:100%;
}
input::-webkit-input-placeholder{
    color:#fff;
}

.nav input{
    background: rgba(89,193,241,.5);
    width:70%;
    height:30px;
    border:none;
    border-radius: 5px;
    padding-left: 15%;
}
.img{
    width:7%;
    max-width: 48px;
    margin-left: 2%;
}
span{
    position:absolute;
    top: 28%;
    left: 8%;
}
span img{
    width:65%;
}
.uls{
    width:90%;
    margin: 0 auto;
    margin-top: 60px;
}
.uls ul{
    display:flex;
    padding:0;
    font-size: 12px;
}
.uls ul li{
    flex:1;
    line-height: 30px;
}
.uls ul li img{
    width: 34%;
}
</style>
